<template>
  <div id="careerplan-manage">
    <wraptitle>
      <template v-slot:view-title
        >职业规划管理（共计：{{ totalcount }}篇）</template
      >
    </wraptitle>
    <div class="toolbar">
      <div class="input-wrap">
        <div class="toolbar-wrap">
          <slot name="menutitle">时段：</slot>
          <el-select v-model="tim" clearable>
            <el-option
              v-for="item in timesLot"
              :key="item.timeslot_id"
              :label="item.name"
              :value="item.timeslot_id"
            ></el-option>
          </el-select>
        </div>

        <div class="toolbar-wrap" v-if="roleid >= 3">
          <slot name="menutitle">班级：</slot>
          <el-select v-model="org" clearable>
            <el-option
              v-for="item in organization"
              :key="item.organization_id"
              :label="item.orgname"
              :value="item.organization_id"
            ></el-option>
          </el-select>
        </div>

        <div class="toolbar-input" v-if="roleid >= 3">
          <el-input
            placeholder="姓名"
            v-model="studentName"
            clearable
          ></el-input>
        </div>

        <div class="toolbar-input" v-if="roleid >= 3">
          <el-input placeholder="学号" v-model="studentId" clearable></el-input>
        </div>

        <el-button type="primary" icon="el-icon-search" @click="SearchCareer"
          >搜索</el-button
        >
      </div>
    </div>
    <div class="careerplan-table-wrap">
      <el-table
        :data="careerplanList"
        border
        stripe
        size="mini"
        style="width: 100%"
      >
        <el-table-column
          prop="user_id.username"
          label="姓名"
          show-overflow-tooltip
          width="80"
        ></el-table-column>
        <el-table-column
          prop="user_id.studentid"
          label="学号"
          show-overflow-tooltip
          width="120"
        ></el-table-column>
        <el-table-column
          prop="user_id.userinfo.organization.orgname"
          label="班级"
          show-overflow-tooltip
          width="250"
        ></el-table-column>
        <el-table-column
          label="职业规划标题"
          show-overflow-tooltip
          min-width="200"
        >
          <template slot-scope="scope">
            <div class="careerplan-title" @click="careerPlanPreview(scope.row)">
              {{ scope.row.title }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="timeslot_id.name"
          label="时段"
          show-overflow-tooltip
          width="100"
        ></el-table-column>
        <el-table-column
          prop="is_studymaster"
          label="是否考研"
          width="70"
          :formatter="formatStudy"
        >
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间"
          width="128"
        ></el-table-column>
        <el-table-column
          prop="publish_time"
          label="提交时间"
          width="128"
        ></el-table-column>
        <el-table-column
          prop="update_time"
          label="更新时间"
          width="128"
        ></el-table-column>
        <el-table-column prop="status" label="状态" fixed="right" width="70">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status == 1 ? 'success' : 'warning'"
              size="mini"
            >
              {{ formatStatus(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="210">
          <template slot-scope="scope">
            <el-button
              size="mini"
              icon="el-icon-edit"
              type="primary"
              circle
              :disabled="disabled"
              @click="edit(scope.row)"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              :disabled="disabled"
              @click="under(scope.row)"
            ></el-button>
            <el-button
              size="mini"
              icon="el-icon-position"
              type="warning"
              round
              @click="iceberg"
            >
              冰山模型
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页部分 -->
    <div class="pagination" v-if="totalcount > 10">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pagesize"
        @current-change="pageChange"
        :current-page.sync="currentPage"
        :total="totalcount"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import wraptitle from '@/components/content/WrapTitle'
import dropdownmenu from '@/components/common/DropDownMenu'
import { getCareerPlanList, deleteCareerPlan } from '@/network/career'
import { getOrganization, getTimesLotList } from '@/network/index'

export default {
  name: 'manage',
  data() {
    return {
      pagenow: 1,
      pagesize: 10,
      // 当前页
      currentPage: 1,
      // 总页数
      totalcount: 0,
      careerplanList: [],
      disabled: true,
      organization: {},
      timesLot: [],
      studentName: '',
      studentId: '',
      tim: '',
      org: ''
    }
  },
  components: {
    wraptitle,
    dropdownmenu
  },
  computed: {
    ...mapGetters(['roleid'])
  },
  created() {
    this.disabled = this.roleid === 3 ? true : false
    this.getTimesLotList()
    this.getOrganization()
    this.getList()
  },
  methods: {
    getTimesLotList() {
      getTimesLotList().then(res => {
        this.timesLot = res.data
        if (res.code === 401) {
          this.$toast(res.message, 'error')
        }
      })
    },
    getOrganization() {
      getOrganization().then(res => {
        this.organization = res.data
      })
    },

    // 获取职业规划数据，渲染到页面
    getList() {
      let params = this.getParams()
      params.pagenow = this.pagenow
      getCareerPlanList(params)
        .then(res => {
          this.careerplanList = res.data.data
          this.totalcount = res.data.totalcount
        })
        .catch(() => {
          this.careerplanList = []
        })
    },

    // 获取参数
    getParams() {
      let params = {}
      params.user_id = this.roleid >= 3 ? '' : this.$store.state.userid
      params.realName = this.studentName
      params.student_id = this.studentId
      params.organization_id = this.org
      params.timeslot_id = this.tim
      params.status = ''
      return params
    },

    // 点击搜索
    SearchCareer() {
      let params = this.getParams()
      this.currentPage = 1
      params.pagenow = 1
      params.pagesize = this.pagesize
      getCareerPlanList(params)
        .then(res => {
          this.careerplanList = res.data.data
          this.totalcount = res.data.totalcount
        })
        .catch(() => {
          this.careerplanList = []
        })
    },

    // 分页点击
    pageChange(currentPage) {
      this.pagenow = currentPage
      this.currentPage = currentPage
      this.getList()
    },

    edit(careerplan) {
      this.$router.push({
        path: '/career/publish/',
        query: {
          careerplan_id: careerplan.careerplan_id
        }
      })
    },
    under(careerplan) {
      this.showDialog(
        '此操作会将该职业规划标记为删除，不再显示, 是否继续?',
        () => {
          deleteCareerPlan({ careerplan_id: careerplan.careerplan_id })
            .then(data => {
              this.$toast('已删除')
              this.getList()
            })
            .catch(err => {
              this.$toast(err.message, 'error')
            })
        }
      )
    },
    iceberg() {},
    // 预览职业规划
    careerPlanPreview(careerplan) {
      this.$router.push({
        path: '/career/previe/',
        query: { careerplan_id: careerplan.careerplan_id }
      })
    },
    showDialog(tip, next) {
      this.$confirm(tip, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          next()
        })
        .catch(() => {})
    },

    // 数据处理部分
    formatStatus(value) {
      return value == 1 ? '已提交' : '待提交'
    },
    formatStudy: function(row, column) {
      return row.is_studymaster == true ? '是' : '否'
    }
  }
}
</script>

<style lang="scss">
.toolbar {
  padding: 20px;
  display: flex;
  flex-direction: row;

  .input-wrap {
    display: flex;
    height: 42px;
    width: 100%;
    line-height: 42px;
    justify-content: space-evenly;

    .toolbar-input {
      margin-top: -1px;
    }
  }
}
.careerplan-title {
  cursor: pointer;
  padding-top: 2px;
  &:hover {
    color: #29b6f6;
  }
}

.pagination {
  margin: 20px;
  text-align: center;
}
.el-pagination {
  justify-content: center;
}
</style>
